<template>
  <div>
    <el-button @click="getData" type="danger" circle size="small">
      +
    </el-button>
    <el-form :model="data.form" label-width="120px">
      <el-form-item
        :label="item.title"
        style="display: flex"
        v-for="(item, index) in data.specsList"
        :key="index"
      >
        <el-input
          v-model="item.value"
          style="width: 200px; margin-right: 20px"
        />
        <el-button
          v-if="index > 0"
          @click="delFirst(index)"
          type="danger"
          circle
          size="small"
        >
          -
        </el-button>
        <el-button @click="addFirst" type="danger" circle size="small">
          +
        </el-button>
        <div
          v-for="(item1, index1) in item.children"
          :key="index1"
          style="
            height: 40px;
            width: 100%;
            padding-left: 30px;
            box-sizing: border-box;
          "
        >
          <el-input
            v-model="item1.value"
            style="width: 200px; margin-right: 20px"
          />
          <el-button
            v-if="index1 > 0"
            @click="delChildren(index, index1)"
            type="danger"
            circle
            size="small"
          >
            -
          </el-button>
          <el-button
            @click="addChildren(index, index1)"
            type="danger"
            circle
            size="small"
          >
            +
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table
      v-if="data.tableData.length > 0"
      :data="data.tableData"
      style="width: 100%"
    >
      <template v-if="data.tabHead.length > 0">
        <el-table-column
          v-for="(itemss, index) in data.tabHead"
          :key="index"
          :prop="`key${index}`"
          :label="itemss.title"
          width="180"
        >
        </el-table-column>
      </template>
      <el-table-column prop="sotck" label="库存" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.sotck"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="originPrice" label="原价" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.originPrice"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="brcode" label="条码" width="180">
        <template #default="scope">
          <el-input v-model="scope.row.brcode"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref,reactive,inject,watch} from 'vue'
const data = reactive({
   form:{},
   specsList:[
      {
         title:'规格名',
         value:'',
         children:[
            {
               value:'',
            }
         ]
      }
   ],
   tableData:[
     {stock:0}
   ],
   tabHead:[]
})
const addChildren = (pIndex,index) => { //添加子规格
   data.specsList[pIndex].children.push({value:''})
}
const delChildren = (pIndex,index) => { //删除子规格
   data.specsList[pIndex].children.splice(index,1)
}
const addFirst = () => { //添加一级规格
   data.specsList.push({
      title:'规格名',
         value:'',
         children:[
            {
               value:'',
            }
         ]
   })
}
const delFirst = index => {
   data.specsList.splice(index,1)
}
watch(()=>data.specsList,(newVal)=>{
   handleSpecs()
},{
   deep:true
}
)
const handleSpecs = () => {
   data.tabHead = []
   data.tableData = []
   data.specsList.forEach((item,index)=>{
      data.tabHead.push({
         title:item.value,
         value:'key'+index
      })
      let values = data.specsList.map(spec => spec.children.map(child => child.value))
      let product = values.reduce((acc, cur) => acc * cur.length, 1)
      let result = []
      for (let i = 0; i < product; i++) {
        let row = {}
        for (let j = 0; j < values.length; j++) {
          let valueIndex = Math.floor(i / values.slice(j + 1).reduce((acc, cur) => acc * cur.length, 1)) % values[j].length
          row[`key${j}`] = values[j][valueIndex]
        }
        result.push(row)
      }
      data.tableData = result
   })
   console.log(data.tableData)
}
const getData = () => {
   console.log(data.specsList)
}
</script>
